<template>
  <div id="account">
    <Breadcrumb :pathContent="content" />
    <el-form ref="AdminUserAddRequest" label-width="100px" class="demo-ruleForm">
      <div class="information-page">
        <el-form-item class="information-title">
          <h1>基础信息</h1>
        </el-form-item>
        <div class="basic-information">
          <div class="information-left-page">
            <el-form-item label="登录账号" prop="account">
              <el-input v-model="AdminUserAddRequest.account" placeholder="请输入账号" disabled=""></el-input>
            </el-form-item>
            <div style="overflow: hidden;">
              <div class="information-left">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="AdminUserAddRequest.name" placeholder="请输入姓名" disabled=""></el-input>
                </el-form-item>
              </div>
              <div class="information-right">
                <el-form-item label="手机" prop="mobile">
                  <el-input v-model="AdminUserAddRequest.mobile" placeholder="请输入手机号码"></el-input>
                </el-form-item>
              </div>
            </div>
            <el-form-item label="部门" prop="dept">
              <el-cascader :options="dept" :props="{ value: 'id', label: 'department', children: 'adminDepartments' }" v-model="AdminUserAddRequest.departments" disabled :show-all-levels="false">
              </el-cascader>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-model="AdminUserAddRequest.position" placeholder="请输入职位" disabled></el-input>
            </el-form-item>
            <el-form-item label="部门负责人" style="text-align: left;">
              <el-radio-group v-model="AdminUserAddRequest.responsible" disabled>
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="information-left">
              <el-form-item label="Email">
                <el-input v-model="AdminUserAddRequest.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </div>
            <div class="information-right">
              <el-form-item label="QQ">
                <el-input v-model="AdminUserAddRequest.qq" placeholder="请输入QQ号码"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div v-if="isAdmin">
          <el-form-item class="information-title page-title">
            <h1>账号权限
              <label style="color: rgb(145, 160, 177); font-size: 12px; font-weight: 300; margin-left: 30px;">权限与角色关联, 这样该账号的角色可完成权限设置</label>
            </h1>
          </el-form-item>
          <el-form-item label="账号权限" class="group-page">
            <el-checkbox-group v-model="roles">
              <el-checkbox :label="item.id" :key="item.id" v-for="item in rolesId" :disabled="true">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
      </div>
      <div class="information-btn">
        <el-form-item>
          <el-button type="primary" @click="saveAccount">保存</el-button>
          <el-button @click="back">取消</el-button>
          <el-button @click="editAccountPass">修改密码</el-button>
        </el-form-item>
      </div>
      <el-dialog title="修改密码" :visible.sync="editPassword" width="20%">
        <el-form :model="form">
          <el-form-item label="旧密码" label-width="60px">
            <el-input v-model="form.oldPassword" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" label-width="60px">
            <el-input v-model="form.newPasswordOne" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="重复输入" label-width="60px">
            <el-input v-model="form.newPasswordTwo" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="savePassword">确 定</el-button>
          <el-button @click="editPassword = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-form>
  </div>
</template>
<script>
import { getAccount, getDeptstaffAll, updateAccount, accountSetPassword, getRoleList } from '@/public/js/setting'
const ButtonFooter = () => import('@/components/common/ButtonFooter')
const Breadcrumb = () => import('@/components/common/Breadcrumb')
export default {
  name: 'AddAccount',
  props: ['formType'],
  data () {
    return {
      editPass: false,
      form: {},
      dept: [],
      content: {
        firstTitle: '设置',
        secondTitle: '账号信息',
        type: 'close'
      },
      roles: [],
      rolesId: [],
      editPassword: false,
      AdminUserAddRequest: {
      },
      isAdmin: true,
      id: ''
    }
  },
  created () {
    getAccount().then(res => {
      if (res.data.errCode === 0) {
        this.isAdmin = res.data.accountInfo.account !== 'admin'
        this.AdminUserAddRequest = res.data.accountInfo
        this.AdminUserAddRequest.departments = res.data.accountInfo.departments
        this.id = res.data.accountInfo.id
        this.AdminUserAddRequest.roles.forEach(e => {
          this.roles.push(e.id)
        })
      }
    })
    getDeptstaffAll().then(res => {
      if (res.data.errCode === 0) this.dept = res.data.adminDepartments
    })
    // 获取全部权限
    getRoleList().then(res => {
      this.rolesId = res.data.adminRoles
    })
  },
  methods: {
    savePassword () {
      let data = this.form
     
      accountSetPassword(data).then(res => {
        if (res.data.errCode === 0) {
          this.$alert('密码修改成功, 需要重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push('/')
            }
          })
          this.editPassword = false
        }
       
      })
    },
    editAccountPass () {
      this.editPassword = true
      this.form = { id: this.id }
    },
    cancel () {
      this.$router.push('/index/order_form')
    },
    saveAccount () {
      let data = {
        'timestamp': 0,
        'version': 'string',
        'operation': 'string',
        'id': this.AdminUserAddRequest.id,
        'account': this.AdminUserAddRequest.account,
        'password': this.AdminUserAddRequest.password,
        'confirmPwd': this.AdminUserAddRequest.confirmPwd,
        'name': this.AdminUserAddRequest.name,
        'mobile': this.AdminUserAddRequest.mobile,
        'dept': this.AdminUserAddRequest.dept,
        'position': this.AdminUserAddRequest.position,
        'responsible': this.AdminUserAddRequest.responsible,
        'email': this.AdminUserAddRequest.email,
        'qq': this.AdminUserAddRequest.qq
      }
      console.log('data', data)
      // 表单验证
      let regPhone = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;

      if (data.mobile && !data.mobile.match(regPhone)){
        console.log('手机格式错误');
        return false;
      }
      updateAccount(data).then(res => {
        if (res.data.errCode === 0) {
          this.$message.success('账号信息保存成功')
          this.$router.go(-1)
        }
      })
    },
    back () {
      this.$router.go(-1)
    }
  },
  components: {
    ButtonFooter,
    Breadcrumb
  }
}
</script>
<style lang="scss" scoped>
#account {
  .information-btn {
    margin-left: 0;
  }
  margin-bottom: 63px;
  .el-cascader {
    width: 100%;
  }
}
.information-page {
  background: white;
  margin-top: 10px;
  .group-page {
    .el-form-item__content {
      text-align: left;
    }
  }
}
.page-title,
.title {
  margin-bottom: 0;
}

.group-page {
  margin-bottom: 0;
  .el-checkbox-group {
    float: left;
    margin-right: 20px;
  }
}

.foo-warpper {
  padding: 0 20px 20px 20px;
}

.information-page {
  padding: 20px;
  .basic-information,
  .account-permissions {
    overflow: hidden;
    .information-left-page {
      width: 47%;
      float: left;
    }
    .information-right-page {
      width: 47%;
      float: right;
    }
  }
  .basic-information {
    .information-left-page {
      .information-title {
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
      .area {
        text-align: left;
      }
    }
  }
  h1 {
    color: #45a2ff;
    text-align: left;
  }
}
.el-select > .el-input {
  display: inline-block;
}

.information-left {
  width: 50%;
  float: left;
}
.information-right {
  width: 50%;
  float: left;
}
.information-title {
  .el-form-item__content {
    margin-left: 0 !important;
  }
}

.complexity {
  text-align: left;
  overflow: hidden;
  span {
    margin-top: 5px;
    line-height: 2;
    color: white;
    padding: 0 40px;
    text-align: center;
    display: inline-block;
    background-color: #e9ecf3;
    float: left;
    margin-right: 2px;
    font-size: 12px;
  }
}
.passwordbg {
  background-color: #1f88f0 !important;
}

.add-account .el-form .el-form-item label {
  text-align: right;
}
</style>
